<template>
    <div>
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <MyCenterPlugin></MyCenterPlugin>
        <ShoppingCartSearch></ShoppingCartSearch>
        <div class="PurchasedShop-logo">
            <img
                src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
        <div class="PurchasedShop-part1">
            <span id="PurchasedShop-allshop" class="PurchasedShop-allshop" @click="underlineMove($event,index)">全部店铺</span>
            <span id="PurchasedShop-spans" class="PurchasedShop-spans"  v-for="(item,index) in filteredSpans" @click="underlineMove($event,index)">{{ item }}</span>
            <div id="PurchasedShop-underline" class="PurchasedShop-underline"></div>
            <el-dropdown class="PurchasedShop-xlk" v-show="spans.length>=7">
                <span class="PurchasedShop-el-dropdown-link">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu  class="PurchasedShop-el-dropdown-menu" slot="dropdown">
                    <el-dropdown-item v-for="item in spans">{{ item }}</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <div class="PurchasedShop-part2">
            <input type="search" placeholder="搜索购买过的店铺"></input>
            <button>搜索</button>
        </div>
        <div class="PurchasedShop-wrap">
            <div class="PurchasedShop-part3" v-for="value in shopSource">
            <img class="PurchasedShop-shopImg" :src="value.shopImg"></img>
            <router-link style="list-style-type: none;color: #000;" to="#"><span class="PurchasedShop-shopName">{{ value.shopName }}</span></router-link>
            <span class="PurchasedShop-ownername">{{value.ownername }}</span>
                <span class="PurchasedShop-part3-sc" v-show="isShoucang" @click="isShoucangChange($event)" style="color:#ff5000"><i class="iconfont icon-shoucang" style="color: #ff5000;"></i>已收藏</span>
                <span class="PurchasedShop-part3-nsc" v-show="!isShoucang" @click="isShoucangChange($event)"><i class="iconfont icon-shoucang"></i>收藏店铺</span>
            <span class="PurchasedShop-part3-del"><i class="el-icon-delete"></i>删除</span>
            <img class="PurchasedShop-itemImg" :src="value.itemImg"></img>
        </div>
        </div>
        
    </div>
</template>
<script>
import HomeTop from "../components/HomeTop.vue";
import HomeRight from "../components/HomeRight.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import "../style/PurchasedShop.css";
import router from "@/router";
export default {
    name: "PurchasedShop",
    
    data() {
        return {
            spans: ["宠物", "美食","服装","书籍","家电","生活","母婴","零食","宠物", "美食","服装","书籍","家电","生活","母婴","零食","宠物", "美食","服装","书籍","家电","生活","母婴","零食"],
            shopSource:[
                {
                    shopImg:"https://img.alicdn.com/imgextra/i1/O1CN01pz5irY1bhDKceJor2_!!6000000003496-2-tps-144-144.png",
                    shopName:"瑾贝生鲜企业店",
                    ownername:"瑾贝生鲜店 ",
                    itemImg:"https://img.alicdn.com/bao/uploaded/i1/2220143000622/O1CN01hQw8cj1GSvQ7f4w6W_!!2220143000622.jpg_100x100xz.jpg",
                },
                {
                    shopImg:"https://img.alicdn.com/imgextra/i4/3334241613/O1CN01dM4FBF1Nmntp4cBgS_!!3334241613.jpg",
                    shopName:"鸿祥商行",
                    ownername:"白云辉23 ",
                    itemImg:"https://img.alicdn.com/bao/uploaded/i2/3334241613/O1CN01o4JaZQ1Nmnw0XfMSm_!!3334241613.png_100x100xz.jpg",
                },
            ],
            isShoucang:false,
            
        }
    },
    methods: {
        underlineMove(event,index){
            const now=event.currentTarget.id;
            if(now === "PurchasedShop-allshop")
            document.getElementById("PurchasedShop-underline").style.left="1.88rem";
            else if(now === "PurchasedShop-spans"){
                document.getElementById("PurchasedShop-underline").style.left=`${10.63+index*7.6}rem`;
            }
                
            
        },
        isShoucangChange(event){
           
            this.isShoucang=!this.isShoucang;
        },
    },
    computed: {
  filteredSpans() {
    return this.spans.slice(0, 7);
  }
}
}
</script>